<template>
  <VanSticky class="the-nav-bar" :class="cssClass">
    <VanNavBar
      :left-arrow="leftArrow"
      v-bind="$attrs"
      @click-left="onClickLeft"
    >
      <template v-for="(value, slot) in slots" :key="slot" #[slot]>
        <div>45</div>
        <slot :name="slot"></slot>
      </template>
    </VanNavBar>
  </VanSticky>
</template>

<script setup>
import { computed, useSlots } from "vue";
import { useRouter } from "vue-router";

let props = defineProps({
  leftArrow: {
    type: Boolean,
    default: true,
  },
  fill: Boolean,
  backRoute: Object,
  fixed: Boolean,
});
let slots = useSlots();

const cssClass = computed(() => {
  return {
    "the-nav-bar--fill": props.fill,
    "the-nav-bar--fixed": props.fixed,
  };
});

const router = useRouter();
const onClickLeft = () => {
  if (props.backRoute) {
    router.replace(props.backRoute);
  } else {
    window.history.back();
  }
};
</script>
<script>
export default {
  inheritAttrs: false,
};
</script>

<style lang="scss" scoped>
.the-nav-bar {
  --van-nav-bar-title-text-color: var(--dx-color-white);
  --van-nav-bar-icon-color: var(--dx-color-white);
  --van-nav-bar-text-color: var(--dx-color-white);
  &--fill {
    ::v-deep(.van-nav-bar__left) {
      padding: 0 var(--dx-gap-lg);
    }
  }

  &--fixed {
    --van-nav-bar-background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;

    ::v-deep(.van-nav-bar__left),
    ::v-deep(.van-nav-bar__title),
    ::v-deep(.van-nav-bar__right) {
      pointer-events: auto;
    }
  }
}
</style>
